<template>
  <div class="contact-container">
    <div class="contact-page">
      <div class="side-nav">
        <div class="nav-title">
          <span class="dot"></span>
          <span class="nav-title-text">联系我们</span>
        </div>
        <ul class="nav-list">
          <li v-for="item in navItems" :key="item.path">
            <router-link
              :to="`/contact/${item.path}`"
              class="nav-link"
              active-class="active"
            >
              {{ item.label }}
            </router-link>
          </li>
        </ul>
      </div>
      <div class="contact-content">
        <!-- 面包屑导航 -->
        <nav class="breadcrumb">
          <router-link to="/">首页</router-link>
          <span class="breadcrumb-sep">/</span>
          <router-link to="/contact">联系我们</router-link>
          <template v-if="currentNav">
            <span class="breadcrumb-sep">/</span>
            <router-link :to="`/contact/${currentNav.path}`">{{ currentNav.label }}</router-link>
          </template>
        </nav>
        
        <!-- 默认显示位置页面 -->
        <router-view v-if="route.path !== '/contact'" />
        <location-page v-else />
      </div>
    </div>

    <!-- 独立图片展示区域 -->
    <div class="office-environment">
      <div class="environment-container">
        <h3 class="environment-title">加盟店展示</h3>
        <div class="image-container">
          <div class="image-item" v-for="(img, index) in galleryImages" :key="index">
            <img :src="img.src" :alt="img.alt || '加盟店'" class="environment-image">
            <p class="image-caption">{{ img.caption || '加盟店' }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import LocationPage from '@/views/contact/LocationPage.vue';

import join1 from '@/assets/images/一级加盟.jfif'
import join2 from '@/assets/images/二级加盟.jfif'
import join3 from '@/assets/images/三级加盟.jfif'
import join4 from '@/assets/images/小型加盟.jfif'

const navItems = [
  { label: '人才招聘', path: 'recruitment' },
  { label: '投诉建议', path: 'complaint' },
  { label: '我的位置', path: 'location' }
];

const galleryImages = [
  { src: join1, alt: '一级加盟', caption: '一级加盟展示' },
  { src: join2, alt: '二级加盟', caption: '二级加盟展示' },
  { src: join3, alt: '三级加盟', caption: '三级加盟展示' },
  { src: join4, alt: '小型加盟', caption: '小型加盟展示' }
];

const route = useRoute();
const currentNav = computed(() => {
  const match = navItems.find(item => route.path.endsWith(item.path));
  return match;
});
</script>

<style lang="scss" scoped>
.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.contact-page {
  display: flex;
  background: #fafafa;
  min-height: 600px;
  margin-bottom: 40px;
}

.side-nav {
  width: 220px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 30px 0 0 0;
  margin-right: 40px;
}

.nav-title {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-left: 30px;
  .dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #333;
    margin-right: 8px;
    position: relative;
    &::after {
      content: '';
      display: block;
      width: 8px;
      height: 8px;
      background: #333;
      border-radius: 50%;
      position: absolute;
      left: 3px;
      top: 3px;
    }
  }
  .nav-title-text {
    font-size: 22px;
    color: #333;
    font-weight: bold;
  }
}

.nav-list {
  list-style: none;
  padding: 0 30px;
  margin: 0;
  .nav-link {
    display: block;
    text-align: center;
    font-size: 18px;
    color: #333;
    padding: 18px 0;
    border-bottom: 1px dashed #ccc;
    text-decoration: none;
    transition: color 0.2s;
    &:hover,
    &.active {
      color: #ff6b9d;
      font-weight: bold;
    }
    &:last-child {
      border-bottom: none;
    }
  }
}

.contact-content {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 30px;
  min-height: 400px;
}

.breadcrumb {
  margin-bottom: 24px;
  font-size: 15px;
  color: #888;
  display: flex;
  align-items: center;
  a {
    color: #888;
    text-decoration: none;
    &:hover {
      color: #ff6b9d;
      text-decoration: underline;
    }
  }
  .breadcrumb-sep {
    margin: 0 8px;
    color: #bbb;
  }
}

/* 独立办公环境区域样式 */
.office-environment {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 30px;
}

.environment-container {
  max-width: 1200px;
  margin: 0 auto;
}

.environment-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.image-item {
  flex: 0 0 calc(25% - 20px);
  min-width: 200px;
  text-align: center;
}

.environment-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  &:hover {
    transform: scale(1.03);
  }
}

.image-caption {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
  text-align: center;
}

@media (max-width: 768px) {
  .contact-page {
    flex-direction: column;
  }
  .side-nav {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .image-item {
    flex: 0 0 calc(50% - 20px);
  }
}
</style>